<template>
  <div>
    <div class="your-scores-container">
      <header class="your-scores"><span class="score-num">{{score}}</span><span class="fenshu">分！</span></header>
      <div class="result-tip">{{ scoreTips }}</div>
    </div>
    <div class="share-button" @click="showCover"></div>
    <div class="share-code">
      <header class="share-header">关注葡萄之家，获取答案。</header>
      <img src="../assets/images/4-4.png" height="212" width="212" class="code-img">
    </div>
    <div class="share-cover" v-show="showHide" @click="showCover">
      <img src="../assets/images/5-2.png" class="share-img">
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import bg from '@/assets/images/4-1.jpg'

  export default {
    name: "score",
    data() {
      return {
        showHide: false, //是否显示提示
        score: 0, //分数
        scoreTips: '', //分数提示
        rightAnswer: [2, 7, 12, 13, 18], //正确答案
        scoreTipsArr: ['你说，是不是把知识都还给小学老师了？', '还不错，但还需要继续加油哦！', '不要嘚瑟还有进步的空间！', '智商离爆表只差一步了！', '你也太聪明啦，葡萄之家欢迎你！']
      }

    },
    created() {
      this.computedScore();
      document.body.style.backgroundImage = `url(${bg})`
    },
    computed: {
      ...mapGetters({
        answers: 'getAnswers',
        standardAnswer: 'getStandardAnswer'
      })
    },
    methods: {
      /**
       * 计算分数
       */
      computedScore() {
        this.answers.forEach((item, index) => {
          if (item === this.standardAnswer[index]) {
            this.score += 25;
          }
        })
      },
      /**
       * 根据分数显示提示
       */
      getScoreTip: function () {
        let index = Math.ceil(this.score / 20) - 1;
        this.scoreTips = this.scoreTipsArr[index];
      },
      /**
       * 是否显示分享提示
       */
      showCover: function () {
        this.showHide = !this.showHide;
      },
    }
  }
</script>

<style lang="less" scoped>
  .your-scores-container {
    width: 9.7rem;
    height: 9.1rem;
    background: url(../assets/images/4-2.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto 0;
    position: relative;
    .your-scores {
      position: absolute;
      width: 100%;
      text-indent: 3.3rem;
      top: 4.7rem;
      font-size: 1.4rem;
      font-weight: 900;
      -webkit-text-stroke: 0.05rem #412318;
      font-family: 'Microsoft YaHei', serif;

      .score-num {
        font-family: Tahoma, Helvetica, Arial, serif;
        color: #a51d31;
      }

      .fenshu {
        color: #a51d31;
      }

    }
    .result-tip {
      position: absolute;
      top: 7rem;
      width: 9rem;
      left: 0.6rem;
      color: #3e2415;
      font-size: 0.65rem;
      text-align: center;
    }

  }

  .share-button {
    width: 6.025rem;
    height: 2.4rem;
    margin: 0.8rem auto 0;
    background: url(../assets/images/4-3.png) no-repeat 0.4rem 0;
    background-size: 5.825rem 100%;
  }

  .share-code {
    width: 5.3rem;
    margin: 1.5rem auto 0;

    .share-header {
      color: #664718;
      font-size: 0.475rem;
      font-family: 'Microsoft YaHei', serif;
      width: 7rem;
      font-weight: 500;
    }

    .code-img {
      height: 5.3rem;
      width: 5.3rem;
      margin-top: 0.5rem;
    }

  }

  .share-cover {
    position: fixed;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    background: url(../assets/images/5-1.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0.92;
  }

  .share-img {
    height: 10.975rem;
    width: 11.95rem;
    position: fixed;
    top: 0.5rem;
    left: 50%;
    margin-left: -5.975rem;
  }
</style>
